<template>
	<div style="display: flex;flex-direction: column;" class="otherPage sustainableDevelopment greenDevelopmentInfo">
		<Header :selected="6"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="1" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row>
					<el-col class="greenDevelopNewsTitle">
						{{data.title}}
					</el-col>
					<el-col class="greenDevelopNewsDate">
						{{$t("releaseDate")}}{{data?"："+data.eventTime:""}}
					</el-col>
				<!-- 	<el-col>
						<img :src="data.coverImage" />
					</el-col> -->
					<el-col class="greenDevelopNewsDescription">
						<div v-html="data.content.setWrap()"></div>
					</el-col>
				</el-row>

			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		csustainableDevelopmentMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: csustainableDevelopmentMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('sustainableDevelopment'),
						to: '/sustainableDevelopment'
					},
					{
						label: this.$t('greenDevelopment'),
						to: '/greenDevelopment'
					}
				],
				hoverIndex: -1,
				data: {
					coverImage: '',
					eventTime: '',
					title: '',
					content: ''
				}
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindBg();
			this.id = this.$route.query.id;
			this.bindGreenDevelopmentDetail().then(i => {
				this.$request.setImageMaxwidth("img");
			});
		},
		methods: {
			/**
			 * 获取绿色发展列表
			 */
			bindGreenDevelopmentDetail() {
				return new Promise((resolve, reject) => {
					let params = {
						greenDevelopmentId: this.id
					};
					let that = this;
					that.$request.getGreenDevelopmentDetail(params).then(res => {
						this.data = res.data
						this.loading = false;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * (1)(1)	获取绿色发展顶部背景-待完善，接口未提供
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getGreenDevelopmentTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			gotoInfo(item) {
				this.$router.push({
					name: this.$t('developmentHistoryInfo'),
					query: item
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateOverview/companyProfile.css");

	.odd {
		padding: 30px 0;
		cursor: pointer;

		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.odd:hover {
		background-color: #F6F6F6;
		transform: scale(0.96)
	}



	.even:hover {
		background-color: #F6F6F6;
		transform: scale(0.96)
	}

	.odd .date .span {
		float: left;

	}

	.even {
		background-color: #F6F6F6;
		padding: 30px 0;
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.img {

		max-width: 500px;
	}

	.date {
		height: 44px;
		margin: 0 0 15px 0 !important;
	}

	.date .span {
		width: 143px;
		background: #0484D7;
		font-size: 22px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 44px;
		text-align: center !important;
	}

	.title {
		color: #333333;
		font-size: 20px;
		overflow: hidden;
		/* 设置超出部分隐藏 */
		text-overflow: ellipsis;
		/* 设置超出部分显示省略号 */
		white-space: nowrap;
		/* 设置文本不换行 */
		margin: 0 0 8px 0 !important;
	}

	.dhcontent {

		overflow: hidden;
		/* 设置超出部分隐藏 */

		font-size: 16px;
		color: #343434;
		font-weight: 400;
		height: 90px;
		line-height: 30px;
		display: inline-block;
		text-overflow: ellipsis;
		/* 设置超出部分显示省略号 */

	}

	.even .title {
		text-align: right;

	}

	.even .date {
		width: 100%;
		background: #F6F6F6;
	}

	.even .date .span {
		float: right;
	}


	.triangle-left {
		width: 0;
		height: 0;
		border-top: 11px solid transparent;
		border-right: 11px solid #0484D7;
		border-bottom: 11px solid transparent;
		float: left;
		margin-top: 11px;
	}

	.triangle-right {
		width: 0;
		height: 0;
		border-top: 11px solid transparent;
		border-left: 11px solid #0484D7;
		border-bottom: 11px solid transparent;
		float: right;
		margin-top: 11px;
	}

	.greenDevelopNewsTitle {
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		font-weight: 530;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.greenDevelopNewsDate {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: 400;
		color: #999999;
		line-height: 33px;
	}

	.greenDevelopNewsDescription {
		font-weight: 400;
		color: #666666;
		line-height: 27px;
	}
	
</style>
